<template>
  <el-breadcrumb class="app-breadcrumb" separator=">">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index) in folderList" :key="item.id">
        <a @click.prevent="handleLink(item)" style="cursor:pointer">
          <img class="assets-item" :src="dirPng">
          <span class="folder-name">{{ item.title}}</span>
        </a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script setup name="Assets-Breadcrumb">
import dirPng from "@/assets/images/file/dir.png"
const props = defineProps({
  folderList: {
    type: Array,
    required: true
  }
})
const emits = defineEmits(['click']);

function handleLink(item) {
  let index = props.folderList.length;
  for (var i in props.folderList) {
    if(props.folderList[i].id === item.id){
      index = i;
    }
  }
  props.folderList.splice(index+1);
  emits("click", item.id)
}
</script>

<style lang='scss' scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  margin-left: 8px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
.assets-item{
  width:26px;
  vertical-align: bottom;
}
.folder-name{
  line-height: 26px;
}
</style>
